<doc>状态栏</doc>
<template>
  <div class="status-bar-ol" v-if="mapConfig.mouseMove || mapConfig.mapMoved">
    <!-- 鼠标位置 -->
    <p class="status-text" v-if="mapConfig.mouseMove">
      鼠标位置：{{ mouseLocation }}
    </p>
    <p class="status-text" v-if="mapConfig.mapMoved">
      当前层级：{{ mapObject.zoom }}
    </p>
    <p class="status-text" v-if="mapConfig.mapMoved">
      可视范围：{{ mapObject.range }}
    </p>
  </div>
</template>
<script>
export default {
  props: {
    mapObject: {
      type: Object,
      default() {
        return {
          mouseLocation: [0, 0],
          zoom: 13,
          range: [0, 0],
        };
      },
    },
    mapConfig: {
      type: Object,
      default() {
        return {
          mouseMove: false,
        };
      },
    },
  },

  computed: {
    mouseLocation() {
      return (
        Number(this.mapObject.mouseLocation[0]).toFixed(5) +
        "," +
        Number(this.mapObject.mouseLocation[1]).toFixed(5)
      );
    },
  },
};
</script>
<style scoped>
.status-bar-ol {
  background-color: rgba(0, 60, 136, 0.3);
  position: absolute;
  bottom: 8px;
  right: 10px;
  color: #fff;
  z-index: inherit;
  padding: 3px;
  font-size: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.status-text {
  margin: 0 5px;
}
</style>
